<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .device-card {
                @apply bg-white rounded-xl shadow-md p-5 transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .device-icon {
                @apply w-14 h-14 rounded-full flex items-center justify-center mb-3;
            }
            .toggle-switch {
                @apply relative inline-block w-12 h-6 cursor-pointer;
            }
            .toggle-slider {
                @apply absolute inset-0 bg-gray-medium rounded-full transition-all duration-300;
            }
            .toggle-slider:before {
                @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
            }
            .toggle-input:checked + .toggle-slider {
                @apply bg-primary;
            }
            .toggle-input:checked + .toggle-slider:before {
                @apply transform translate-x-6;
            }
            .btn-primary {
                @apply bg-primary text-white py-3 px-6 rounded-lg shadow-md hover:bg-primary/90 transition-all duration-300 flex items-center justify-center gap-2;
            }
            .btn-secondary {
                @apply bg-gray-light text-dark py-3 px-6 rounded-lg shadow-md hover:bg-gray-200 transition-all duration-300 flex items-center justify-center gap-2;
            }
            .message-bubble {
                @apply rounded-lg p-4 max-w-[80%] my-2 clear-both;
            }
            .message-user {
                @apply bg-primary text-white float-right rounded-tr-none;
            }
            .message-ai {
                @apply bg-gray-light text-dark float-left rounded-tl-none;
            }
        }
    </style>

    <!-- 语音识别相关 -->
    <script src="../crypto-js.js"></script>
    <script src="../../dist/index.umd.js"></script>
    <script src="./system.js"></script>
</head>

<body class="bg-gray-50 font-inter min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <i class="fa fa-home text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">智能家居控制中心</h1>
            </div>
            <div class="flex items-center gap-4">
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-bell-o text-xl"></i>
                </button>
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-cog text-xl"></i>
                </button>
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-user"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
        <!-- 左侧设备控制区 -->
        <section class="lg:w-2/3">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-dark mb-4">设备控制</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- 灯泡控制 -->
                    <div class="device-card" id="light-device">
                        <div class="device-icon bg-primary/10 text-primary">
                            <i class="fa fa-lightbulb-o text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅灯光</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅主灯开关</p>
                        <div class="flex justify-between items-center">
                            <span id="light-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="light-toggle"
                                    class="toggle-input" onchange="toggleDevice('light')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <!-- 空调控制 -->
                    <div class="device-card" id="ac-device">
                        <div class="device-icon bg-secondary/10 text-secondary">
                            <i class="fa fa-snowflake-o text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">卧室空调</h3>
                        <p class="text-gray-dark text-sm mb-4">控制卧室空调开关和温度</p>
                        <div class="flex justify-between items-center">
                            <div>
                                <span id="ac-status" class="text-success font-medium">已关闭</span>
                                <span id="ac-temperature" class="ml-2 text-gray-dark">--°C</span>
                            </div>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="ac-toggle" class="toggle-input"
                                    onchange="toggleDevice('ac')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="ac-controls" class="mt-4 hidden">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-sm text-gray-dark">温度调节</span>
                                <span id="current-temp" class="font-medium">24°C</span>
                            </div>
                            <div class="flex gap-2">
                                <button
                                    class="w-10 h-10 rounded-full bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors"
                                    onclick="adjustTemperature('ac', -1)">
                                    <i class="fa fa-minus"></i>
                                </button>
                                <button
                                    class="w-10 h-10 rounded-full bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors"
                                    onclick="adjustTemperature('ac', 1)">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 窗帘控制 -->
                    <div class="device-card" id="curtain-device">
                        <div class="device-icon bg-warning/10 text-warning">
                            <i class="fa fa-columns text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅窗帘</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅窗帘开关</p>
                        <div class="flex justify-between items-center">
                            <span id="curtain-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="curtain-toggle"
                                    class="toggle-input" onchange="toggleDevice('curtain')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <!-- 电视控制 -->
                    <div class="device-card" id="tv-device">
                        <div class="device-icon bg-danger/10 text-danger">
                            <i class="fa fa-television text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅电视</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅电视开关</p>
                        <div class="flex justify-between items-center">
                            <span id="tv-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="tv-toggle" class="toggle-input"
                                    onchange="toggleDevice('tv')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <!-- 加湿器控制 -->
                    <div class="device-card" id="humidifier-device">
                        <div class="device-icon bg-primary/10 text-primary">
                            <i class="fa fa-tint text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">书房加湿器</h3>
                        <p class="text-gray-dark text-sm mb-4">控制书房加湿器开关</p>
                        <div class="flex justify-between items-center">
                            <span id="humidifier-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="humidifier-toggle"
                                    class="toggle-input" onchange="toggleDevice('humidifier')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <!-- 智能机器人控制 -->
                    <div class="device-card" id="vacuum-device">
                        <div class="device-icon bg-secondary/10 text-secondary">
                            <i class="fa fa-random text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">智能机器人</h3>
                        <p class="text-gray-dark text-sm mb-4">控制智能机器人开关</p>
                        <div class="flex justify-between items-center">
                            <span id="vacuum-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input style="visibility: hidden;" type="checkbox" id="vacuum-toggle"
                                    class="toggle-input" onchange="toggleDevice('vacuum')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 场景模式 -->
            <div>
                <h2 class="text-xl font-bold text-dark mb-4">场景模式</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                    <button
                        class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1"
                        onclick="activateScene('home')">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 mx-auto">
                            <i class="fa fa-home text-xl"></i>
                        </div>
                        <p class="font-medium text-center">回家模式</p>
                    </button>
                    <button
                        class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1"
                        onclick="activateScene('sleep')">
                        <div
                            class="w-12 h-12 rounded-full bg-dark/10 flex items-center justify-center text-dark mb-2 mx-auto">
                            <i class="fa fa-moon-o text-xl"></i>
                        </div>
                        <p class="font-medium text-center">睡眠模式</p>
                    </button>
                    <button
                        class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1"
                        onclick="activateScene('movie')">
                        <div
                            class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger mb-2 mx-auto">
                            <i class="fa fa-film text-xl"></i>
                        </div>
                        <p class="font-medium text-center">影院模式</p>
                    </button>
                    <button
                        class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1"
                        onclick="activateScene('away')">
                        <div
                            class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning mb-2 mx-auto">
                            <i class="fa fa-suitcase text-xl"></i>
                        </div>
                        <p class="font-medium text-center">离家模式</p>
                    </button>
                </div>
            </div>
        </section>

        <!-- 右侧语音控制区 -->
        <section class="lg:w-1/3 bg-white rounded-xl shadow-md p-5">
            <h2 class="text-xl font-bold text-dark mb-4">语音控制</h2>
            <p class="text-gray-dark text-sm mb-4">对我说话，我可以帮你控制智能家居设备</p>

            <!-- 语音消息区 -->
            <div id="chat-messages" class="h-[300px] overflow-y-auto mb-4 pb-2">
                <div class="message-bubble message-ai">
                    <p>你好！我是你的智能家居助手。你可以通过语音控制家中的设备，例如：</p>
                    <p class="mt-1">• "打开客厅灯光"</p>
                    <p class="mt-1">• "关闭卧室空调"</p>
                    <p class="mt-1">• "将温度设置为26度"</p>
                </div>
            </div>

            <!-- 语音输入区 -->
            <div class="flex gap-3">
                <input type="text" id="voice-input" placeholder="输入语音指令..."
                    class="flex-grow py-3 px-4 rounded-lg border border-gray-medium focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                <button id="voice-button" class="btn-primary">
                    <i class="fa fa-microphone"></i>
                    <span>按住说话</span>
                </button>
            </div>
        </section>
    </main>

    <!-- 底部状态栏 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="text-gray-dark text-sm">
                <p>智能家居控制中心 v1.0</p>
            </div>
            <div class="flex gap-4">
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-question-circle"></i>
                </button>
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-bug"></i>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 设备状态管理
        const devices = {
            light: { status: false, element: 'light' },
            ac: { status: false, temperature: 24, element: 'ac' },
            curtain: { status: false, element: 'curtain' },
            tv: { status: false, element: 'tv' },
            humidifier: { status: false, element: 'humidifier' },
            vacuum: { status: false, element: 'vacuum' }
        };

        // 定义相关执行函数
        const win = {
            set_power: (state,deviceName) => {
                const device=devices[deviceName];
                device.status=state==='on'?true:false;
                updateDeviceUI(deviceName);
            }
        }

        // 切换设备状态
        function toggleDevice(deviceName) {
            const device = devices[deviceName];
            device.status = !device.status;

            // 更新UI
            updateDeviceUI(deviceName);

            // 添加语音反馈
            addMessage(device.status ? `已打开${getDeviceName(deviceName)}` : `已关闭${getDeviceName(deviceName)}`, 'assistant');
        }

        // 更新设备UI显示
        function updateDeviceUI(deviceName) {
            const device = devices[deviceName];
            const statusElement = document.getElementById(`${deviceName}-status`);
            const toggleElement = document.getElementById(`${deviceName}-toggle`);

            // 更新开关状态
            toggleElement.checked = device.status;

            // 更新状态文本
            if (device.status) {
                statusElement.textContent = "已开启";
                statusElement.className = "text-primary font-medium";
            } else {
                statusElement.textContent = "已关闭";
                statusElement.className = "text-success font-medium";
            }

            // 特殊设备处理
            if (deviceName === 'ac') {
                const tempElement = document.getElementById('ac-temperature');
                const controlsElement = document.getElementById('ac-controls');

                if (device.status) {
                    tempElement.textContent = `${device.temperature}°C`;
                    controlsElement.classList.remove('hidden');
                } else {
                    tempElement.textContent = "--°C";
                    controlsElement.classList.add('hidden');
                }
            }
        }

        // 调节温度
        function adjustTemperature(deviceName, change) {
            if (deviceName === 'ac' && devices.ac.status) {
                // 温度范围限制在16-30度
                devices.ac.temperature = Math.max(16, Math.min(30, devices.ac.temperature + change));

                // 更新UI
                document.getElementById('ac-temperature').textContent = `${devices.ac.temperature}°C`;
                document.getElementById('current-temp').textContent = `${devices.ac.temperature}°C`;

                // 添加语音反馈
                addMessage(`已将${getDeviceName(deviceName)}温度调整为${devices.ac.temperature}度`, 'assistant');
            }
        }

        // 激活场景模式
        function activateScene(sceneName) {
            // 根据场景设置设备状态
            switch (sceneName) {
                case 'home':
                    devices.light.status = true;
                    devices.ac.status = true;
                    devices.curtain.status = true;
                    devices.tv.status = false;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("欢迎回家！已为你开启舒适的环境", 'assistant');
                    break;
                case 'sleep':
                    devices.light.status = false;
                    devices.ac.status = true;
                    devices.curtain.status = false;
                    devices.tv.status = false;
                    devices.humidifier.status = true;
                    devices.vacuum.status = false;
                    addMessage("祝你有个好梦！已为你调整为睡眠模式", 'assistant');
                    break;
                case 'movie':
                    devices.light.status = false;
                    devices.ac.status = true;
                    devices.curtain.status = false;
                    devices.tv.status = true;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("准备好享受电影了吗？已为你调整为影院模式", 'assistant');
                    break;
                case 'away':
                    devices.light.status = false;
                    devices.ac.status = false;
                    devices.curtain.status = false;
                    devices.tv.status = false;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("出门注意安全！已为你关闭所有设备", 'assistant');
                    break;
            }

            // 更新所有设备UI
            for (const deviceName in devices) {
                updateDeviceUI(deviceName);
            }
        }

        // 获取设备中文名
        function getDeviceName(deviceName) {
            const names = {
                light: "客厅灯光",
                ac: "卧室空调",
                curtain: "客厅窗帘",
                tv: "客厅电视",
                humidifier: "书房加湿器",
                vacuum: "智能机器人"
            };
            return names[deviceName] || deviceName;
        }


        const msg = [
            {
                role: "system",
                content: defineRole,
            },
        ]

        // 添加消息到聊天界面
        function addMessage(text, sender) {
            const messagesElement = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message-bubble message-${sender}`;
            messageDiv.innerHTML = `<p>${text}</p>`;
            messagesElement.appendChild(messageDiv);
            // 用户与AI的对话
            if (sender !== 'todo') {
                msg.push({
                    role: sender,
                    content: text,
                })
            }

            // 滚动到底部
            messagesElement.scrollTop = messagesElement.scrollHeight;
        }

        // 语音识别
        function startVoiceRecognition() {
            // 检查浏览器支持
            if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
                addMessage("抱歉，你的浏览器不支持语音识别功能", 'assistant');
                return;
            }

            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            const recognition = new SpeechRecognition();

            // 配置识别参数
            recognition.lang = 'zh-CN';
            recognition.interimResults = false;

            // 显示正在监听
            addMessage("正在聆听...", 'user');

            // 识别结果处理
            recognition.onresult = function (event) {
                const speechResult = event.results[0][0].transcript.toLowerCase();
                addMessage(speechResult, 'user');

                // 处理语音指令
                processVoiceCommand(speechResult);
            };

            // 识别结束
            recognition.onend = function () {
                // 可以在这里添加结束监听的UI反馈
            };

            // 识别错误
            recognition.onerror = function (event) {
                addMessage(`语音识别错误: ${event.error}`, 'assistant');
            };

            // 开始识别
            recognition.start();
        }

        // 处理语音指令
        function processVoiceCommand(command) {
            // 简单的命令匹配逻辑
            if (command.includes('打开')) {
                if (command.includes('灯')) {
                    devices.light.status = true;
                    updateDeviceUI('light');
                    addMessage("已为你打开客厅灯光", 'assistant');
                } else if (command.includes('空调')) {
                    devices.ac.status = true;
                    updateDeviceUI('ac');
                    addMessage("已为你打开卧室空调", 'assistant');
                } else if (command.includes('窗帘')) {
                    devices.curtain.status = true;
                    updateDeviceUI('curtain');
                    addMessage("已为你打开客厅窗帘", 'assistant');
                } else if (command.includes('电视')) {
                    devices.tv.status = true;
                    updateDeviceUI('tv');
                    addMessage("已为你打开客厅电视", 'assistant');
                } else if (command.includes('加湿器')) {
                    devices.humidifier.status = true;
                    updateDeviceUI('humidifier');
                    addMessage("已为你打开书房加湿器", 'assistant');
                } else if (command.includes('智能机器人')) {
                    devices.vacuum.status = true;
                    updateDeviceUI('vacuum');
                    addMessage("已为你启动智能机器人", 'assistant');
                }
            } else if (command.includes('关闭')) {
                if (command.includes('灯')) {
                    devices.light.status = false;
                    updateDeviceUI('light');
                    addMessage("已为你关闭客厅灯光", 'assistant');
                } else if (command.includes('空调')) {
                    devices.ac.status = false;
                    updateDeviceUI('ac');
                    addMessage("已为你关闭卧室空调", 'assistant');
                } else if (command.includes('窗帘')) {
                    devices.curtain.status = false;
                    updateDeviceUI('curtain');
                    addMessage("已为你关闭客厅窗帘", 'assistant');
                } else if (command.includes('电视')) {
                    devices.tv.status = false;
                    updateDeviceUI('tv');
                    addMessage("已为你关闭客厅电视", 'assistant');
                } else if (command.includes('加湿器')) {
                    devices.humidifier.status = false;
                    updateDeviceUI('humidifier');
                    addMessage("已为你关闭书房加湿器", 'assistant');
                } else if (command.includes('智能机器人')) {
                    devices.vacuum.status = false;
                    updateDeviceUI('vacuum');
                    addMessage("已为你关闭智能机器人", 'assistant');
                }
            } else if (command.includes('温度')) {
                // 提取温度值
                const match = command.match(/(\d+)/);
                if (match && match[1]) {
                    const temp = parseInt(match[1]);
                    if (temp >= 16 && temp <= 30) {
                        devices.ac.status = true;
                        devices.ac.temperature = temp;
                        updateDeviceUI('ac');
                        addMessage(`已为你将卧室空调温度设置为${temp}度`, 'assistant');
                    } else {
                        addMessage("温度设置范围为16-30度，请重新设置", 'assistant');
                    }
                }
            } else if (command.includes('回家')) {
                activateScene('home');
            } else if (command.includes('睡觉') || command.includes('睡眠')) {
                activateScene('sleep');
            } else if (command.includes('电影') || command.includes('影院')) {
                activateScene('movie');
            } else if (command.includes('离家') || command.includes('出门')) {
                activateScene('away');
            } else {
                addMessage("抱歉，我不理解这个指令，请换一种说法", 'assistant');
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化所有设备状态
            for (const deviceName in devices) {
                updateDeviceUI(deviceName);
            }
        });
    </script>
    <script>
        var APPID = "a6241e4f";
        var API_SECRET = "YjQ0NjZkODEyZGRlOTVhMTVlNTMzODlk";
        var API_KEY = "93bfcdafcdc741ce29e0fb1627c0dfd9";
    </script>

    <script src="./智能家居-语音转文字.js"></script>
    <script src="./智能家居-大模型.js"></script>
</body>

</html>